<template>
  <div v-dialogDrag>
    <el-dialog
        :title="loadingTitle"
        v-model="dialogVisible"
        width="100%"
        :top="30"
        center
        :destroy-on-close="true"
        :close-on-click-modal="false"
        :before-close="handleClose">
      <el-table :height="'calc('+(tableHeight)+'px)'" border :data="tableData" ref="tableref" v-loading="loadingPage"
                style="width: 100%">
        <el-table-column type="index" width="60" align="center" label="序号">
          <template #default="scope">
            <span v-text="getIndex(scope.$index)"></span>
          </template>
        </el-table-column>
        <el-table-column min-width="70" prop="pingzhongdaima" label="品种代码"></el-table-column>
        <el-table-column min-width="110" prop="pingzhongmingchen" label="品种名称"></el-table-column>
        <el-table-column min-width="110" prop="l1_name" label="申万一级"></el-table-column>
        <el-table-column min-width="110" prop="l2_name" label="申万二级"></el-table-column>
        <el-table-column min-width="110" prop="l3_name" label="申万三级"></el-table-column>
        <el-table-column min-width="100" prop="yinglishu" label="盈利数"></el-table-column>
        <el-table-column min-width="100" prop="zongcishu" label="总次数"></el-table-column>
        <el-table-column min-width="100" prop="shenglv" label="胜率(%)"></el-table-column>
        <el-table-column min-width="100" prop="shouxufei" label="手续费(元)"></el-table-column>
        <el-table-column min-width="100" prop="jinlirun" label="净利润(元)"></el-table-column>
        <el-table-column min-width="100" prop="shouyilv" label="收益率(%)"></el-table-column>
        <el-table-column min-width="100" prop="nianhuashouyilv" label="年化收益率(%)"></el-table-column>
        <el-table-column min-width="100" prop="xiangduishouyilv" label="相对收益率α/β(%)"></el-table-column>
        <el-table-column min-width="100" prop="zuidahuice" label="最大回撤(元)"></el-table-column>
        <el-table-column min-width="100" prop="zuidahuicebi" label="最大回撤比(%)"></el-table-column>
      </el-table>
      <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </el-dialog>
  </div>
</template>

<script>
import {apiSystemUserAdd, apiSystemUserEdit, 回测分析列表, 回测分析数据详情} from "@/api/api";
import {getTableHeight} from "@/utils/util";
import Pagination from "@/components/Pagination.vue";

export default {
  name: "HuicefenxiData",
  components: {Pagination},
  emits: ['refreshData'],
  data() {
    return {
      tableHeight: 500,
      tableData: [],
      dialogVisible: false,
      loadingSave: false,
      loadingTitle: '',
      defaultImg: 'this.src="' + require('../../../assets/img/avatar.jpg') + '"',
      formInline: {
        page: 1,
        limit: 100,
        huicefenxiId: '',
      },
      pageparm: {
        page: 1,
        limit: 100,
        total: 0
      },
      formData: {
        name: '',
        nickname: '',
        username: '',
        mobile: '',
        create_datetime: '',
        update_datetime: '',
        is_active: true,
        avatar: ''
      },
      rolelist: [],
      options: [],
    }
  },
  methods: {
    callFather(parm) {
      this.formInline.page = parm.page
      this.formInline.limit = parm.limit
      this.getData()
    },
    // 表格序列号
    getIndex($index) {
      // (当前页 - 1) * 当前显示数据条数 + 当前行数据的索引 + 1
      return (this.pageparm.page - 1) * this.pageparm.limit + $index + 1
    },
    listenResize() {
      this.$nextTick(() => {
        this.getTheTableHeight()
      })
    },
    getTheTableHeight() {
      let tabSelectHeight = this.$refs.tableSelect ? this.$refs.tableSelect.offsetHeight : 0
      tabSelectHeight = tabSelectHeight - 500;
      this.tableHeight = getTableHeight(tabSelectHeight)
    },
    //获取列表
    async getData(huicefenxiId) {
      this.loadingPage = true
      this.formInline.huicefenxiId = huicefenxiId;
      回测分析数据详情(this.formInline).then(res => {
        this.loadingPage = false
        if (res.code == 2000) {
          this.tableData = res.data.data
          console.log('tableData', this.tableData);
          this.pageparm.page = res.data.page;
          this.pageparm.limit = res.data.limit;
          this.pageparm.total = res.data.total;
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.loadingSave = false
      this.$emit('refreshData')
    },
    addUserFn(item, flag) {
      this.loadingTitle = flag
      this.dialogVisible = true
      this.formData = item ? item : {
        name: '',
        nickname: '',
        username: '',
        mobile: '',
        create_datetime: '',
        update_datetime: '',
        is_active: true,
        avatar: ''
      }
      this.formInline.huicefenxiId = item.id;
      this.getData(item.id);
    },
    submitData() {
      this.$refs['rulesForm'].validate(obj => {
        if (obj) {
          this.loadingSave = true
          let param = {
            ...this.formData
          }
          if (this.formData.id) {
            apiSystemUserEdit(param).then(res => {
              this.loadingSave = false
              if (res.code == 2000) {
                this.$message.success(res.msg)
                this.handleClose()
                this.$emit('refreshData')
              } else {
                this.$message.warning(res.msg)
              }
            })
          } else {
            apiSystemUserAdd(param).then(res => {
              this.loadingSave = false
              if (res.code == 2000) {
                this.$message.success(res.msg)
                this.handleClose()
                this.$emit('refreshData')
              } else {
                this.$message.warning(res.msg)
              }
            })
          }

        }
      })
    },
    imgBeforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJPG) {
        this.$message.error('图片只能是 JPG/PNG 格式!');
        return false
      }
      return isJPG;
    },
    async imgUploadRequest(option) {
      // OSS.ossUploadProductImg(option);
    },
    imgUploadSuccess(res) {
      if (res) {
        this.formData.img = res.url
      }
    },
  },
  mounted() {
    // 监听页面宽度变化搜索框的高度
    window.addEventListener('resize', this.listenResize);
    this.$nextTick(() => {
      this.getTheTableHeight()
    })
  },

  unmounted() {
    // 页面销毁，去掉监听事件
    window.removeEventListener("resize", this.listenResize);
  },
}
</script>

